<{include file="top_v2.html" }>
<link rel="stylesheet" href="<{$preStaticUrl}>Wap/v2/css/mui.picker.min.css?v=<{$resVersion}>" />
<script src="<{$preStaticUrl}>Wap/v2/js/mui.min.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/mui.picker.min.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/city.data-2.js"></script>

</head>
<body>
<div id="wrap" class="pt baoming-page">
    <div class="header">
        活动报名
        <a href="javascript:window.history.back();" class="back"></a>
    </div>
    <div class="img-box">
        <img src="<{$preUploadcUrl}><{$info.imgList}>" alt="" />
        <p><{$info.typeHtml}> | <{$info.title}></p>
    </div>

    <div class="title">报名信息</div>
    <div class="section-1">
        <div class="ui-item">
            <{if $info.needDeliver neq 0}>
                <label for="realname">收件人:</label>
            <{else}>
                <label for="realname">姓　名:</label>
            <{/if}>
            <input type="text" placeholder="请填写姓名" id="realname" value="<{$userinfo.realName}>"/>
        </div>

        <{if $userinfo.bindPhone}>
            <div class="ui-item">
                <label for="phone">手机号:</label>
                <input type="tel" maxlength="11" placeholder="请填写联系人手机号" id="phone" value="<{$userinfo.bindPhone}>" readonly/>
            </div>
        <{else}>
            <div class="ui-item">
                <label for="phone">手机号:</label>
                <input type="tel" maxlength="11" placeholder="请填写联系人手机号" id="phone"/>
                <a href="javascript:void(0);" class="getCode">获取验证码</a>
            </div>

            <div class="ui-item">
                <label for="code">验证码:</label>
                <input type="text" maxlength="11" placeholder="请输入验证码" id="code"/>
            </div>
        <{/if}>

        <{if $info.needDeliver neq 0}>
            <div class="ui-item">
                <label for="cityPicker">收件地址:</label>
                <input  type="text" readonly  id="cityPicker" value="<{$street}>" placeholder="区县街道选择" />
            </div>
            <div class="ui-item">
                <label for="deliverAddress"></label>
                <input  type="text"  id="deliverAddress" placeholder="详细地址" value="<{$address}>"/>
            </div>
        <{/if}>
        <{if $info.needNickname eq '1'}>
        <div class="ui-item">
            <label for="babyNickname">宝贝姓名:</label>
            <input  type="text"  id="babyNickname" placeholder="宝贝的姓名" value="<{$babyNickname}>"/>
        </div>
        <{/if}>

        <{if $info.needSex eq '1'}>
        <div class="ui-item">
            <label for="babySex">宝贝性别:</label>
            <input   type="text" readonly id="babySex" placeholder="宝贝性别" value="<{$babySex}>"/>
        </div>
        <{/if}>

        <{if $info.needAge eq '1'}>
            <div class="ui-item">
                <label for="babyBirthday">宝贝年龄:</label>
                <input  type="text" readonly id="babyBirthday" placeholder="出生年月" value="<{$babyBirthday}>"/>
            </div>
        <{/if}>

        <{if $addressPool}>
        <div class="ui-item">
            <label for="addressPool">地址选择:</label>
            <input  type="text" readonly name="addressPool" id="addressPool" placeholder="地址选择" required/>
        </div>
        <{/if}>

        <{if $otherPool}>
        <div class="ui-item">
            <label for="addressPool"><{$otherTitle}>:</label>
            <input  type="text" readonly name="otherPool" id="otherPool" placeholder="<{$otherTitle}>选择" required/>
        </div>
        <{/if}>


        <{foreach from=$ext item=item}>
            <div class="ui-item ext">
                <label><{$item.title}>:</label>
                <input  type="text"  name="ext[]"  placeholder="<{$item.tip}>" required/>
            </div>
        <{/foreach}>
    </div>

    <div class="title">留言</div>
    <div class="section-2">
        <textarea placeholder="留言会提高入选率这件事，丸子会乱说？" id="mark"></textarea>
    </div>

    <p class="tip">留言将在活动页展示</p>

    <{if $info.point || ($info.price*100)>0}>
    <div class="title">支付信息</div>
        <{if $info.point}>
            <div class="section-3">
                <span>所需积分(拥有<em><{$userinfo.point}></em>积分)</span>
                <span><{$info.point}>积分</span>
            </div>
        <{/if}>
        <{if $info.price gt 0}>
            <div class="section-3">
                <span>所需金额</span>
                <span><{$info.price}>元</span>
            </div>
        <{/if}>
    <{/if}>
    <div class="btn-group">
        <a href="javascript:void(0);" class="signup" id="apply">提交报名</a>
    </div>
</div>



<!--中奖弹窗-->
<div class="pop pop-prize">
    <div class="pop-container">
        <a href="javascript:void(0);" class="pop-close close"></a>
        <div class="pop-header">
            <img src="img/icon-fail.png" alt="" />
            <p>很遗憾，未中奖。</p>
        </div>
        <div class="pop-content">
            <img src="img/pic.jpg" alt="" />
            <p class="tip">- 专属福利 -</p>
            <p>商品名称: 极品燕窝</p>
            <p>商品价格: 0积分</p>
            <p>专属价格: 0积分(8.0折)</p>
            <div class="btn-group">
                <a href="javascript:void(0);" class="buy">立即购买</a>
            </div>
        </div>
    </div>
</div>

<!--填写信息弹窗-->
<div class="pop pop-info">
    <div class="pop-container">
        <div class="pop-header">请完善您的信息</div>
        <div class="pop-content">
            <div class="tip">
                <p>请填写信息，工作人员将尽快为您发货。</p>
                <p>信息不完整视为自动放弃哦~</p>
            </div>
            <div class="ui-item">
                <label for="user">用户姓名</label>
                <input type="text" placeholder="请填写姓名" id="user"/>
            </div>
            <div class="ui-item">
                <label for="phone">联系电话</label>
                <input type="tel" placeholder="请填写联系电话" id="phone" maxlength="11"/>
            </div>
            <div class="ui-item">
                <label for="address">详细地址</label>
                <textarea id="address" placeholder="请填写详细地址"></textarea>
            </div>
            <div class="btn-group">
                <a href="javascript:void(0);" class="submit">提交信息</a>
            </div>
        </div>
    </div>
</div>

<!--积分不足弹窗-->
<div class="pop pop-tip">
    <div class="pop-container">
        <a href="javascript:void(0);" class="pop-close close"></a>
        <div class="pop-header">提示</div>
        <div class="pop-content">
            <p>您的积分不足，马上去赚积分。</p>
            <div class="btn-group">
                <a href="javascript:void(0);" class="close">知道了</a>
            </div>
        </div>
    </div>
</div>

<!--关注弹窗-->
<div id="mustFollow" class="pop pop-attention">
    <div class="pop-container">
        <a href="javascript:void(0);" class="pop-close close"></a>
        <div class="pop-header">请关注丸子妈妈</div>
        <div class="pop-content">
            <img src="<{$preStaticUrl}>Wap/images/<{$qrcode_path}>" alt="" class="qrcode"/>
            <p>关注丸子妈妈，才可享受全部福利呦<br />长按二维码关注</p>
            <div class="btn-group">
                <a href="javascript:void(0);" class="close">知道了</a>
            </div>
        </div>
    </div>
</div>




<!--弹出框 成功提示-->
<div id="applySuccess" class="hint-box" style="display:none;">
    <div class="hint nofollow_box">
        <div class="topic title">报名成功！</div>
        <{if !$userinfo.WX_openid}>
         <dl class="con"><img src="<{$preStaticUrl}>Wap/images/<{$qrcode_path}>" /></dl>
        <{/if}>
        <dl class="list text">更多福利，请继续关注我们哦</dl>
        <{if !$userinfo.WX_openid}>
            <dl class="list shibie">长按二维码关注</dl>
        <{/if}>
        <button type="button" class="button zdl">知道了</button>
    </div>
</div>

<!--弹出框秒抢—积分兑换-->
<div id="applySuccessItem" class="hint-box" style="display:none;">
    <div class="hint welfare_box">
        <a class="close zdl" href="javascript:void(0);"></a>
        <div class="topic">很遗憾未中奖</div>
        <h3>专属福利</h3>
        <dl class="con"><img id="itemimg" src="<{$preStaticUrl}>Wap/images/dy_img.jpg" /></dl>
        <dl class="list">商品名称：<font id="itemtitle">联盛中影50元代金券</font></dl>
        <dl class="list">商品价格：<font id="itempoint">5000积分</font></dl>
        <dl class="list">专属价格：<font id="salePoint">4000积分（8折）</font></dl>

        <button  type="button" class="button buy">立刻购买</button>
    </div>
</div>


<!-- 积分商城信息补足 -->
<div class="hint-box" id="pointMallForm" style="display:none;">
    <div class="hint hdbm_box">
        <div class="topic" id="send-title">请完善您的信息</div>
        <div class="title">请填写信息，工作人员将尽快为您发货。<br>信息不完整视为自动放弃哦~</div>
          <div class="hdbm_item" style="margin-top:0;">
            姓&nbsp;&nbsp;名
            <input type="text" id="realName" value="<{$userinfo.realName}>"/>
        </div>
        <div class="hdbm_item">
            联系电话
            <input type="text"  id="phoneNum" value="<{$userinfo.bindPhone}>"/>
        </div>
        <div class="hdbm_item jfdh_form">
            详细地址
            <textarea id="address"><{$userinfo.address}></textarea>
        </div>
        <button type="button" id="send-btn-exchange" onclick="deliverExchange()" class="button">提交信息</button>
    </div>
</div>


</body>
</html>


<script type="text/javascript">
    var joinUrl = "<{U('Events/join')}>";
    var itemUrl = "<{U('PointMall/info')}>";
    var smsUrl = "./api.php?m=api&c=Sms&a=sendSmsCode";
    var id = "<{$info.id}>";
    var comeback = 0;
    var itemid = 0;
    var deliveryType=0;

    var showPop = function(el){
        var pop = $(el).find(".pop-container");
        $(el).show();
        var h = $(pop).height()
        $(pop).css({
            'margin-top': -h/2
        })
    }

    var posting=false;
    var useVIP=0;
    function confirm(){
        //询问框
        layer.open({
            content: "年卡会员可直接参加，是否消耗年卡次数！"
            ,btn: [ '不消耗,看运气','消耗']
            ,no: function(index){
                layer.closeAll();
                useVIP=1;
                applyDo();
            },yes:function(e){
                useVIP=0;
                applyDo();
            }
        });
    }



<{if $addressPool }>
    //地址选择
    var addressPicker = new mui.PopPicker();
    addressPicker.setData([
        <{foreach from=$addressPool item=item key=key}>
        {
        value: '<{$key}>',
        text: '<{$item}>'
    },
       <{/foreach}>
    ]);

    $("#addressPool").click(function(){
        addressPicker.show(function(items) {
            $("#addressPool").val(items[0].text)
        });
    })

    //////////////////////////////////////
    <{/if}>



<{if $otherPool }>
    var otherPicker = new mui.PopPicker();
    otherPicker.setData([
        <{foreach from=$otherPool item=item key=key}>
        {
            value: '<{$key}>',
            text: '<{$item}>'
        },
    <{/foreach}>
    ]);

    $("#otherPool").click(function(){
        otherPicker.show(function(items) {
            $("#otherPool").val(items[0].text)
        });
    })

    //////////////////////////////////////
<{/if}>


<{if $info.needSex eq '1' }>
    var sexPicker = new mui.PopPicker();
    sexPicker.setData([
        {
            value: '男宝',
            text: '男宝'
        },
        {
            value: '女宝',
            text: '女宝'
        },
    ]);

    $("#babySex").click(function(){
        sexPicker.show(function(items) {
            $("#babySex").val(items[0].text)
        });
    })
<{/if}>


    function applyDo(){
        if(posting){return false;}

        var realname = $("#realname").val()
                ,phone = $("#phone").val()
                ,mark = $("#mark").val()
                ,code = $("#code").val()
                ,street = $("#cityPicker").val()
                ,address=$("#deliverAddress").val()
                ,addressPool=$("#addressPool").val()
                ,otherPool=$("#otherPool").val()
                ,babyNickname=$("#babyNickname").val()
                ,babySex=$("#babySex").val()
                ,babyBirthday=$("#babyBirthday").val();
        if (!validatePhone(phone)) {
            layer.open({
                content: '请输入正确的手机号码'
                ,btn: '我知道了'
            });
            return false;
        };

        var extV='';
        var ext=[];
        var f=true;
        $('.ext').each(function(i,item){
            var t=$(item).find('label').text();
            var v=$(item).find('input').val();
            if(v.trim()==''){
                f=false;

                layer.open({
                    content: t+'请填写后再提交'
                    ,btn: '好的'
                });
                return false;
            }


            ext.push(t+v);
        });

        if (ext.length>0){
            extV=ext.join(';');
        }

        if(!f){return  false;}

        loadObj = load();
        posting=true;
        var param = {realname:realname,phone:phone,id:id,mark:mark,code:code,babyBirthday:babyBirthday,useVIP:useVIP,street:street,address:address,addressPool:addressPool,
        babyNickname:babyNickname,babySex,babySex,otherPool:otherPool,ext:extV};



        $.ajax({
            url:joinUrl,
            type:'get',
            data:param,
            dataType:'JSON',
            success:function(data){
                posting=false;
                layer.close(loadObj);
                comeback = data.comeback;
                if(data.status!=0){
                    switch(data.status){
                        case 2://关注
                            showPop('.pop-attention')
                            break;
                        default:
                            tip(data.msg);
                            break;
                    }
                }else{
                    if(data.payUrl.length>0){
                        window.location.href=data.payUrl;
                        return false;
                    }
                    if(typeof(data.item) != undefined && data.item.length<=0){
                        if(data.hasFollow){
                            tip(data.msg,function(){
                                location.href="<{u('Events/info?id='|cat:$info.id)}>";
                            });
                        }else{//未关注提示关注
                            if (data.title.length > 0) $("#applySuccess .title").html(data.title);
                            if (data.text.length > 0) $("#applySuccess .text").html(data.text);
                            $("#applySuccess").show();
                        }
                    }else{
                        $("#applySuccessItem #itemimg").attr('src',data.item.img);
                        $("#applySuccessItem #itemtitle").html(data.item.title);
                        $("#applySuccessItem #itempoint").html(data.item.point+"积分");
                        $("#applySuccessItem #salePoint").html(data.item.salePoint+"积分("+data.item.discount+"折)");
                        $("#applySuccessItem").show();
                        itemid = data.item.id;
                        deliveryType=data.item.deliveryType;
                    }
                }
            },
            error:function (e) {
                tip("登陆过期，重新登陆",function(){
                    location.href="<{$LOGIN_URL}>backurl=" + encodeURIComponent(location.href);
                },3);

            }
        });
    }

    $(function(){
        if("<{$askFollow}>"=="1"){
            showPop('#mustFollow');
            return;
        }

        //购买
        $("#mustFollow .close").click(function(){
            location.href="<{u('Events/info?id='|cat:$info.id)}>";
        })

        var text = document.getElementById("mark");
        autoTextarea(text);


        $("#babyBirthday").click(bindDate);


        //购买
        $(".buy").click(function(){
            $('.pop-prize').hide();
            showPop('.pop-info');
        })




        $("#apply").on('click', function(){
            if ("<{$isVIP}>"=="1"){
                confirm();
            }else{
                applyDo();
            }
        });


        $(".getCode").on('click', function () {
            var phone = $("#phone").val();
            if (!validatePhone(phone)) {
               layer.open({
                    content: '请输入正确的手机号码'
                    ,btn: '我知道了'
                });
                return false;
            };
            if (wait) return false;
                wait=true;
            $.getJSON(smsUrl, {phone:phone,bind:1}, function(data){
                    tip(data.msg);
                    if(data.status==0){
                        $('.getCode').html('<font>60</font>秒后重试');
                        timer = setInterval(countDown,1000);
                        wait = true;
                    }else{
                        wait = false;
                    }
            });
        });

        $(".button.zdl, .close.zdl").click(function() {
            $(".hint-box").css({"display":"none"});
            if(comeback == 1){
                window.history.back();
                return false;
            }
        });
        $(".button.buy").click(function() {
            $(".hint-box").css({"display":"none"});
            doExchange();
        });

        var timer;
        var wait = false;
        var countDown = function CountDown() {
            var maxtime = parseInt($(".getCode font").html());
            if(maxtime>=1){
                --maxtime;
                $('.getCode font').html(maxtime);
            }else{
                clearInterval(timer);
                $('.getCode').html('获取验证码');
                wait = false;
            }
        }

    });



    //普通兑换 事件总入口
    function doExchange(){
    <{if !$userinfo}>
        location.href="<{U('User/login')}>";
        return;
    <{/if}>

        //需要发货
        const DELIVERY_SEND = <{$DELIVERY_SEND}>;
        //卡券
        const DELIVERY_CARD = <{$DELIVERY_CARD}>;

        $.ajax({
            url:"<{U('PointMall/validateExchange')}>",
            dataType:"json",
            data:{"id":itemid,"eventID":id},
            type:"GET",
            success:function(data){
                if(data.status == 0){
                    if(deliveryType == DELIVERY_SEND){
                        showDeliverExchangeForm();
                    }else if(deliveryType == DELIVERY_CARD){
                        $.ajax({
                            url:"<{U('PointMall/cardExchange')}>",
                            dataType:"json",
                            data:{"id":itemid,'eventID':id},
                            type:"GET",
                            success:function(data){
                                if(data.status == 0){
                                    layer.closeAll();
                                    tip(data.msg);
                                    goUserCard();
                                }else{
                                    tip(data.msg);
                                }
                            },
                        });
                    }
                }else{
                    tip(data.msg);
                }
            },

        });

    };

    //显示普通兑换-配送表单
    function showDeliverExchangeForm(){
        $("#pointMallForm").show();
    }

    //配送--普通兑换
    function deliverExchange(){
        var phone   = $('#phoneNum').val();
        var name    = $('#realName').val();
        var address = $('#address').val();
        $.ajax({
            url:"<{U('PointMall/doExchange')}>",
            dataType:"json",
            data:{"id":itemid,"eventID":id,"realname":name,"address":address,"phone":phone},
            type:"POST",
            success:function(data){
                if (data.status==0) {
                    $('#pointMallForm').hide();
                    tip(data.msg);
                }else{
                    tip(data.msg);
                }
            },
            error:function(data){
                tip('异常');
            }
        });
    };



    function bindDate(){
        var _self = this;
        var birthValue = $(_self).val();
        if(_self.picker) {
            _self.picker.show(function (rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        } else {
            var type,beginDate,endDate;
            type='month';
            beginDate=new Date(2000, 01, 01);
            endDate=new Date();
            _self.picker = new mui.DtPicker({
                type: type,
                value: birthValue,
                beginDate: beginDate,
                endDate: endDate
            })
            _self.picker.show(function(rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        }
    }






    <{if $info.needDeliver neq 0}>

    //区域选择
    var cityPicker = new mui.PopPicker({
        layer: 2
    });

    cityPicker.setData(nbCityData);

    var area = $("#cityPicker").val().split('.');

    for(var i=0;i<nbCityData.length;i++){
        if(nbCityData[i].text==area[0]){
            cityPicker.pickers[0].setSelectedIndex(i)
            if(area[0]=='其它地区'){break;}
            var level2 = nbCityData[i].children
            for(var j=0;j<level2.length;j++){
                if(level2[j].text==area[1]){
                    cityPicker.pickers[1].setSelectedIndex(j)
                    break
                }
            }
            break
        }
    }
   <{/if}>
    var _getParam = function(obj, param) {
        return obj[param] || '';
    };


    $("#cityPicker").click(function(){
        var _self = this;
        cityPicker.show(function(items) {
            var text = _getParam(items[0], 'text') + "." + _getParam(items[1], 'text') ;
            $(_self).val(text);
        });
    })


</script>
